<template>
    <div class="app">
         <header class="mint-header"><div class="mint-header-button is-left"><a href="#/home" class="router-link-active"><button class="mint-button mint-button--default mint-button--normal"><span class="mint-button-icon"><i class="mintui mintui-back"></i></span> <label class="mint-button-text"></label></button></a></div> <h1 class="mint-header-title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;  font-size:16px;">心脑健康</font></font></h1> <div class="mint-header-button is-right"><button class="mint-button mint-button--default mint-button--normal"><span class="mint-button-icon"><i class="mintui mintui-more"></i></span> <label class="mint-button-text"></label></button></div></header>
        <div class="d1"><img src="http://127.0.0.1:3000/img/wenyajiangya.jpg" alt=""></div>
        <div class="d2"><img src="http://127.0.0.1:3000/img/baokuantuijian.jpg" alt=""></div>
        <div class="centent-item" >
             <div class="centent"  v-for="item of list" :key="item.id"><img :src="item.pic" alt=""><p>{{item.title}}</p><div>{{item.info}}
            </div><p class="centcol">￥{{item.price.toFixed(2)}}</p></div>
             
        </div>
    </div>
    
</template>
<script>
   export default{
        data(){return{list:[]}},
        methods:{
            getxinnao(){
                var url="http://127.0.0.1:3000/getshenjing";
                this.$http.get(url).then(result=>{
                    this.list=result.body;
                    
                });
            },
        },
        created() {
            this.getxinnao();
                  }
    }
</script>
<style>
.centent{
    height: 107px;
    width: 100%;
    padding-top: 25px;
    border-bottom: 1px solid rgb(236, 232, 232);
    background: #fff;
}
.centent  img{
    display: block;
    float: left;
    width: 80px;
    height: 80px;
    margin-left:15px;
}
.centent p{
    margin-left:120px; 
    margin-bottom: 0;
    font-size: 16px;
    color: #111;
}
.centent div{
    width: 200px;
    height: 22px;
     margin-left:120px; 
    font-size: 12px;
     white-space:nowrap;
       overflow:hidden;
       text-overflow:ellipsis;
}
.centent .centcol{
    color: red;
}
.d1 img{
    height:170px;
    width:100%;
}
.d2 img{
    width: 100%;
}
</style>

